<template>
	<view class="container">
		<view class="inner">
			<view class="inner-items" v-if="withList.length>0">
				<view class="dis_flex" v-for="(item,index) in withList" :key="index">
					<view class="detailed_flex detailed_1">
						<view class="detailed_flex_right">
							 <view class="detailed_flex_right_tit">
							 	<view class="tit">钻石转化</view>
								<view class="time">{{item.add_time}}</view>
							 </view>
							 <view class="money">{{item.true_money}}元</view>
						</view>
					</view>
					<view class="detailed_flex_bottom">
						<text>转化金额:{{item.money}}元 </text>
						<text style="margin-left: 10rpx;">手续费:{{item.taxfee}}元</text>
					</view>
				</view>
				<u-loadmore :status="hasMore?'loading':'nomore'" />
			</view>
			<view class="dis_flex_no" v-else>
				<image src="https://farm-city.oss-cn-hangzhou.aliyuncs.com/static/images/Notyet.png" mode="widthFix"></image>
				<text>暂无相关记录</text>
			</view>
		</view>
		<!-- 待审核 -->
	</view>
</template>

<script>
	var _this;
	export default {
		data() {
			return {
				withList: [],
				pageIndex:1,
				hasMore:true
			}
		},
		onLoad() {
			_this=this
			this.withlist();
		},
		onReachBottom() {
			if(this.hasMore){
				this.pageIndex++
				this.withlist()
			}
		},
		methods: {
			itemClick(index) {
				this.status = index
				this.pageIndex = 1
				this.withList = []
				this.withlist()
			},
			//获取提现记录列表
			async withlist() {
				const params = {
					pageIndex:this.pageIndex,
					pageSize:20,
				}
				const data = await _this.$post('api/zh_list',params)
				this.withList.push(...data.data.watchlist)
				this.hasMore=data.data.watchlist.length>=20
			}
		}
	}
</script>
<!-- #ifdef APP-PLUS -->
<style>
	page{
		background: #FFFFFF;
	}
</style>
<!-- #endif -->
<style lang="scss" scoped>
	page{
		background: #FFFFFF;
	}
	.container{
		.inner{
			padding: 20rpx 20rpx 0 20rpx;
			.dis_flex {
				display: flex;
				flex-direction: column;
				border-radius: 10px;
				padding:0 20rpx 0 20rpx;
				margin-bottom: 20rpx;
				box-shadow: $global-shade;
				.detailed_flex {
					display: flex;
					.det_img1 {
						width: 46rpx;
						height: 39rpx;
						margin-right: 20rpx;
						align-self: center;
					}
					.detailed_flex_right{
						flex: 1;
						border-bottom: 1px solid #F3F3F3;
						display: flex;
						align-items: center;
						justify-content: space-between;
						height: 120rpx;
						.detailed_flex_right_tit{
							.tit{
								font-size: 28rpx;
							}
							.time{
								margin-top: 10rpx;
							}
						}
						.money{
						}
					}
				}
				.detailed_flex_bottom{
					height: 80rpx;
					display: flex;
					align-items: center;
					justify-content: flex-end;
				}
			}
			.dis_flex_no{
				padding-top: 20%;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				image{
					width: 106rpx;
				}
				text{
					margin-top: 20rpx;
					color: #bcbcbc;
				}
			}
		}
	}
	
	.green{
		background-color: #E7F6EF;
		color: #02AB20;
		border-radius:15rpx ;
		padding: 0 6rpx;
	}
	.blue{
		background-color: #D4E0F7;
		color:#3978EC ;
		border-radius: 15rpx;
		padding: 0 6rpx;
	}
</style>
